<template>
  <div class="root">
    <div class="title">
      <div class="title-box">
        <div class="title-border"></div>
        <div class="title-text">{{ title }}</div>
      </div>
      <div class="href-bottom"></div>
    </div>

    <div
      :class="['content-css', isRightBg ? 'content-css-right' : 'content-css-left']"
      :style="{ height: height }"
    >
      <div class="left"></div>
      <div class="right"></div>
      <div class="bottom"></div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "ItemWrap",
  props: {
    title: {
      type: String,
      default: "",
    },
    height: {
      type: String,
      default: "calc(100% - 45px)",
    },
    isRightBg: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 版本号
      version: "3.8.9",
    };
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.root {
  width: 100%;
  height: 100%;
  .title {
    height: 45px;
    width: 100%;
    // background: linear-gradient(90deg, rgba(17, 85, 226, 0.43) 0%, rgba(5, 29, 63, 0.22) 100%);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
      linear-gradient(270deg, rgba(0, 253, 255, 0) 0%, rgba(0, 253, 255, 0.2) 100%);
    // box-sizing: border-box;
    // border: 1px solid;
    // border-image: linear-gradient(90deg, #2494e6 0%, rgba(4, 68, 194, 0.25) 100%) 1;
    // box-shadow: inset 16px 1px 15px 0px rgba(38, 177, 236, 0.17),
    //   inset 0px 0px 11px 0px rgba(27, 131, 252, 0.48);
    position: relative;
    .title-box {
      display: flex;
      height: 45px;
      align-items: center;
      .title-border {
        width: 20px;
        height: 20px;
        background: url(../assets/images/t-icon.png);
        background-repeat: no-repeat;
        margin: 0 10px;
      }
      .title-text {
        font-size: 20px;
        font-weight: normal;
        line-height: 20px;
        color: #fff;
      }
    }
    .href-bottom {
      position: absolute;
      right: 0px;
      bottom: 0px;
      width: 50px;
      height: 3px;
      background-color: #e6f0ff;
    }
  }
  .content-bg {
    background: url(../../assets/images/item_warp/cont-bg.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #042641;
    height: calc(100% - 45px);
  }
  // .content-css-left {
  //   background: linear-gradient(
  //     90deg,
  //     rgba(2, 23, 44, 0.9) 0%,
  //     rgba(26, 85, 167, 0.72) 100%
  //   ) !important;
  // }
  // .content-css-right {
  //   background: linear-gradient(
  //     -90deg,
  //     rgba(2, 23, 44, 0.9) 0%,
  //     rgba(26, 85, 167, 0.72) 100%
  //   ) !important;
  // }
  .content-css {
    height: calc(100% - 45px);
    background: linear-gradient(
      180deg,
      rgba(2, 23, 44, 0.9) -3%,
      rgba(0, 0, 0, 0.7) 100%
    );
    box-sizing: border-box;
    border: 2px solid;
    border-image: linear-gradient(180deg, #042641 -3%, #042642 100%) 2;
    backdrop-filter: blur(10px);
    position: relative;
    // .left {
    //   position: absolute;
    //   left: -2px;
    //   width: 2px;
    //   background-color: #1383c0;
    //   height: 30%;
    //   top: 50%;
    // }
    // .right {
    //   position: absolute;
    //   right: -2px;
    //   width: 2px;
    //   background-color: #1383c0;
    //   height: 30%;
    //   top: 20%;
    // }
    // .bottom {
    //   position: absolute;
    //   bottom: -2px;
    //   height: 2px;
    //   background: url(../../assets/images/item_warp/content-bottom-bg.svg);
    //   background-repeat: no-repeat;
    //   background-position: center;
    //   background-color: #02172c;
    //   width: 100%;
    //   left: 0;
    //   background-size: 100%;
    // }
  }
}
</style>
